<template>
	<div class="sign-course-list">
    <div class="search">
			<uni-search-bar placeholder="搜索" bgColor="#EEEEEE" @confirm="search" v-model="key"/>
		</div>
    <ul class="list-course" v-if="courseList.length > 0">
      <li v-for="(item, index) in courseList" :key="index" @click="getSignDetail(item)">
        <h4>{{ item.courseName }}</h4>
        <div class="course-body">
          <div class="cover"><img :src="item.frontImageFileUrl ? item.frontImageFileUrl : 'https://newmefit.cn/resource/gym/base/base2.jpg'" mode="aspectFit"></div>
          <div class="course-info">
            <p>学员名称：<span v-for="(o, i) in item.userMemberList" :key="i">{{ o.userName }} </span></p>
            <p>购买时间：{{ item.payTime ? item.payTime : '' }}</p>
            <p>合约状态：{{ getSignCourseState(item.signCourseState) }}</p>
            <p>剩余数量：{{ item.remainCount ? item.remainCount : '' }}</p>
            <p>有效期至：{{ item.expirationEndTime ? item.expirationEndTime : '' }}</p>
          </div>
        </div>
        <i class="cicon cicon-tip1" :class="{'cicon-tip1': item.courseType === 1, 'cicon-tip2': item.courseType === 0}">{{ item.courseType === 1 ?'私教课' : '自由练' }}</i>
      </li>
    </ul>
    <div class="no-data" v-if="courseList.length === 0">
      <img src="https://newmefit.cn/resource/gym/base/base6.png">
    </div>
    <uni-load-more :status="more"></uni-load-more>
	</div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { pageTeachCoachUserSignCourse } from '@/api/manageApi'
	export default {
		data() {
			return {
        page: 1,
        limit: 10,
        totalPage: 0,
        more: 'more',
        courseList: [],
        key: ''
			}
    },
    computed:{
			...mapGetters(['uniToken', 'userInfo'])
		},
		onLoad () {
      this.getSignCourse(this.key)
    },
    onShow () {
      this.getSignCourse(this.key)
    },
    //下拉刷新
		onPullDownRefresh () {
			this.page = 1
			this.getSignCourse(this.key)
    },
    //上拉加载
		onReachBottom () {
			if(this.page < this.totalPage){
				this.page++
				this.getSignCourse(this.key)
			}
		},
		methods: {
      search () {
        // console.log(this.key)
        this.getSignCourse(this.key)
      },
      getSignCourseState (val) {
        if (val === 0) {
          return '未支付'
        } else if(val === 1) {
          return '未开始'
        } else if(val === 2) {
          return '正常'
        } else if(val === -1) {
          return '过期'
        } else {
          return ''
        }
      },
			getSignCourse (key) {
        var params = {
          'size': this.limit,
          'current': this.page,
          'userId': this.userInfo.userId,
          'orders[0].order': 'desc',
          'orders[0].sort': 'createTime',
          'key': key
        }
        this.more = "loading"
        pageTeachCoachUserSignCourse(params).then(res => {
          // console.log(res)
          if (res.code == '200') {
            var data = res.data.records
            this.more = 'more'
            if (this.page == 1) {
              this.totalPage = Math.ceil(parseInt(res.data.total)/this.limit)
              this.courseList = data
              uni.stopPullDownRefresh()
            } else {
              this.courseList = this.courseList.concat(data)
            }
            if (this.page >= this.totalPage) {
              this.more = 'noMore'
            }
          }
        })
			},
      getSignDetail (item) {
        // console.log(item.signCourseState)
        if(item.signCourseState === 0){
          this.goUrl('/pagesA/sign/signCoursePay?id='+item.signCourseId)
        } else {
          this.goUrl('/pagesA/sign/signCourseDetail?id='+item.signCourseId)
        }
      }
		}
	}
</script>

<style lang="scss">
.sign-course-list{
  width: 702rpx;
  margin: 0 auto;
  .list-course{
    width: 100%;
    li{
      width: 100%;
      height: 294rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 30rpx 28rpx;
      margin-top: 24rpx;
      position: relative;
      .cicon{
        position: absolute;
        right: 0;
        top: 0;
        width: 106rpx;
        height: 36rpx;
        border-radius: 0rpx 20rpx 0rpx 20rpx;
        display: inline-block;
        text-align: center;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 34rpx;
      }
      .cicon-tip1{
        background: #FF5D3D;
      }
      .cicon-tip2{
        background: #FFBF40;
      }
      h4{
        margin-bottom: 20rpx;
        font-size: 30rpx;
        color: #1E1E1E;
        width: 533rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .course-body{
        display: flex;
        .cover{
          width: 220rpx;
          height: 174rpx;
          line-height: 174rpx;
          text-align: center;
          // background: #E0E0E0;
          border-radius: 15rpx;
          margin-right: 20rpx;
          img{
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
            border-radius: 15rpx;
          }
        }
        .course-info{
          font-size: 24rpx;
          color: #838383;
          line-height: 36rpx;
        }
      }
    }
  }
}
</style>
